<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<title>欢迎</title>
	<%
		pageContext.setAttribute("APP_PATH",request.getContextPath());
	%>
	<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<!-- 新增  -->
	<div class="modal fade" id="emps_save_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">员工新增</h4>
	      </div>
	      <div class="modal-body">
	        <form class="form-horizontal">	
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">姓名:</label>
			    <div class="col-sm-10" id="dname">
			      <input type="text" class="form-control" id="emp_name_input" placeholder="姓名" name="empName">
			      <span class="help-block"></span>
			    </div>
			  </div>
			 
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">性别:</label>
			    <div class="col-sm-10">
			      <select class="form-control" id="emp_sex_input" name="gender">
					  <option value="M">男</option>
					  <option value="F">女</option>
				  </select>
			    </div>
			  </div>
			   <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">邮箱:</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" id="emp_email_input" name="email" placeholder="邮箱">
			   	   <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">部门:</label>
			    <div class="col-sm-10">
			      <select class="form-control" id="emp_dept_select" name="dId">
					  
				  </select>
			    </div>
			  </div>
			  <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="emp_save_btn">确认</button>
	      	 </div>
			</form>
      		</div>
	      </div> 
	    </div>
	  </div>
	  <!-- 修改 -->
	  <div class="modal fade" id="emps_update_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">员工新增</h4>
	      </div>
	      <div class="modal-body">
	        <form class="form-horizontal">	
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">姓名:</label>
			    <div class="col-sm-10" id="dname">
			     <p class="form-control-static" id="emp-name-update"></p>
			    </div>
			  </div>
			 
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">性别:</label>
			    <div class="col-sm-10">
			      <select class="form-control" id="emp-sex-update" name="gender">
					  <option value="M">男</option>
					  <option value="F">女</option>
				  </select>
			    </div>
			  </div>
			   <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">邮箱:</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" id="emp-email-update" name="email" placeholder="邮箱">
			   	   <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">部门:</label>
			    <div class="col-sm-10">
			      <select class="form-control" id="emp-dept-update" name="dId">
					  
				  </select>
			    </div>
			  </div>
			  <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary eidt-id" id="emp_update_btn">确认</button>
	      	 </div>
			</form>
      		</div>
	      </div> 
	    </div>
	  </div>
	  
	<!-- 列表展现  -->
	<div class="container">
		<div class="row"> 
			<div class="col-md-12 col-md-offset-4"><h1>员工信息显示</h1></div>
		</div>
		
		<div class="row">
				<table class="table table-hover" align="center" >
					  <tr align="center">
					  	<td><input type="checkbox" id="check_all"></td><td>编号</td> <td>姓名</td> <td>性别</td> <td>邮箱</td> <td>部门</td> <td>操作</td>
					  </tr>
					  <tbody align="center" id="emps_tbl">
					  
					  </tbody>	  
			   </table> 
			   <div>
			   		<a type="button" class="btn btn-info" id="empSave">员工新增</a> 
					<a type="button" class="btn btn-danger col-md-offset-10" id="empDelete">批量删除</a>
					
					<span id="page_info_area" class="col-md-offset-4"></span>
					<div  id="page_nav_area" class="col-md-offset-4"></div>
		
			   </div>   
		</div>
	</div>
	<div class="row">
		
		
	</div>
	<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	
	<script type="text/javascript">
		var totalRecord;
		var tonum;
		//执行方法   
		function to_page(pn){
				$.ajax({
					url:"${APP_PATH}/emps",
					data:"pn="+pn,
					type:"get",
					success:function(result){
						//请求成功以后，解析并显示数据
						$("input[type=checkbox]").prop("checked",false);
						build_emps_table(result);
						//解析并显示分页
						build_emps_info(result);
						build_emps_tables(result);
					}
				});
			}
		   
			$(function(){
				to_page(1);
			});
		
		
			//显示数据
			function build_emps_table(result){
				$("#emps_tbl").empty();
				var emps=result.extend.pageInfo.list;
				//调用jquery的each方法进行迭代遍历
				$.each(emps,function(index,item){
					//构建表格数据
					var checkBoxTd=$("<td><input type='checkbox' class='check_items'></td>")
					var empIdTd=$("<td></td>").append(item.empId);
					var empNameTd=$("<td></td>").append(item.empName);
					var empGenderTd=$("<td></td>").append(item.gender == 'M'?"男":"女");
					var empEmailTd=$("<td></td>").append(item.email);
					var deptNameTd=$("<td></td>").append(item.department.deptName);
					var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn").append("编辑");
				  	editBtn.attr("eidt-id",item.empId);
					var delBtn =$("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append("删除");
					delBtn.attr("del-id",item.empId);
					var td=$("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
					$("<tr></tr>").append(checkBoxTd).append(empIdTd).append(empNameTd).append(empGenderTd).append(empEmailTd).append(deptNameTd).append(td).appendTo("#emps_tbl");
				});
			};
			
			function build_emps_info(result){
				$("#page_info_area").empty();
				$("#page_info_area").append(
						"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
						"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
						"当前"+result.extend.pageInfo.pageNum+"页&nbsp;",
						"总"+result.extend.pageInfo.pages+"页 &nbsp;",
						"共"+result.extend.pageInfo.total+"记录");
				totalRecord=result.extend.pageInfo.total;
				tonum=result.extend.pageInfo.pageNum;
			}
			
			//分页方法
		   function build_emps_tables(result){
				  	$("#page_nav_area").empty();
					//构建分页导航栏
					var firstPage=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
					firstPage.click(function(){
						to_page(1);
					});
					
					var prePage=$("<li></li>").append($("<a></a>").append("&laquo;"));
					prePage.click(function(){
						to_page(result.extend.pageInfo.pageNum-1);
					});
					if(result.extend.pageInfo.hasPreviousPage == false){
						firstPage.addClass("disabled");
						prePage.addClass("disabled");
					}
					var nextPage=$("<li></li>").append($("<a></a>").append("&raquo;"));
					nextPage.click(function(){
						to_page(result.extend.pageInfo.pageNum+1);
					});
					
					var lastPage=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
					lastPage.click(function(){
						to_page(result.extend.pageInfo.pages);
					});
					
					if(result.extend.pageInfo.hasNextPage == false){
						nextPage.addClass("disabled");
						lastPage.addClass("disabled");
					}
					var ul=$("<ul></ul>").addClass("pagination");
					ul.append(firstPage,prePage);
					
					$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
						var numLi=$("<li></li>").append($("<a></a>").append(item));
						if(result.extend.pageInfo.pageNum == item){
							numLi.addClass("active");
						}
						numLi.click(function(){
							to_page(item);
						});
						ul.append(numLi);
					})
					ul.append(nextPage,lastPage);
					
					var navELe=$("<nav></nav>").append(ul);
					navELe.appendTo("#page_nav_area")
				
			};
		//模态框
		$("#empSave").click(function(){
			
			getdepts("#emp_dept_select");
			
			$('#emps_save_modal').modal({
				backdrop: 'static',
				keyboard: true,
			});
		});
		
		function getdepts(ele){
			$(ele).empty();
			$.ajax({
				url:"${APP_PATH}/depts",
				type:"GET",
				success:function(result){
					var depts = result.extend.dept;
					$.each(depts,function(index,dept){
						$("<option></option>").append(dept.deptName).val(dept.deptId).appendTo(ele);
					});
				},
			});
		}
		
		
		/* function build_depts_select(result){
			$("#emp_dept_select").empty();
			var depts = result.extend.dept;
			$.each(depts,function(index,dept){
				$("<option></option>").append(dept.deptName).val(dept.deptId).appendTo("#emp_dept_select");
			});
			$("#emp_dept_select option").eq(0).attr("selected","selected");
		}
		 */
		/* 点击提交 */
		$("#emp_save_btn").click(function(){
			/* 当点击提交时调用正则表达式判断 */
			if(!validate_ename_form() || !validate_email_form()){
				return false;
			}
			/* 发送ajax请求 */
			$.ajax({	
				url:"${APP_PATH}/emp",
				type:"POST",
				data:$("#emps_save_modal form").serialize(),
				success:function(result){
				$("#emps_save_modal").modal('hide');
				to_page(totalRecord);
				}	
			});
		});
		
		/* 正则表达式判断 */
		function validate_ename_form(){
			var empName = $("#emp_name_input").val();
			var regName = /(^[a-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
			if(!regName.test(empName)){
				$("#emp_name_input").parent().addClass("has-error");
				$("#emp_name_input").next("span").attr("id","helpBlock2").addClass("help-block").text("请输入6-16位字母数字组合或2-5位汉字");
				return false;
			}else{
				$("#emp_name_input").parent().removeClass("has-error").addClass("has-success");
				$("#emp_name_input").next("span").text("");
			} 
			return true;
		}		
		
		/* 正则表达式判断 */
		function validate_email_form(){
			var empEmail = $("#emp_email_input").val();
			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			if(!regEmail.test(empEmail)){
				$("#emp_email_input").parent().addClass("has-error");
				$("#emp_email_input").next("span").text("邮箱格式不正确,例：test@163.com");
				return false;
			}else{
				$("#emp_email_input").parent().removeClass("has-error").addClass("has-success");
				$("#emp_email_input").next("span").text("");
			}
			return true;
		}
		
		/* 正则表达式判断 */
		function validate_email_update(){
			var empEmail = $("#emp-email-update").val();
			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			if(!regEmail.test(empEmail)){
				$("#emp-email-update").parent().addClass("has-error");
				$("#emp-email-update").next("span").text("邮箱格式不正确,例：test@163.com");
				return false;
			}else{
				$("#emp-email-update").parent().removeClass("has-error").addClass("has-success");
				$("#emp-email-update").next("span").text("");
			}
			return true;
		}
		
		/* 失去焦点验证 */
		$("#emp_name_input").blur(function(){
			validate_ename_form();
		});
		
		$("#emp_email_input").blur(function(){
			validate_email_form();
		});
		$("#emp-email-update").blur(function(){
			validate_email_update();
		});
		
		/* 点击编辑按钮触发 */
		$(document).on("click",".edit_btn",function(){
			getdepts("#emp-dept-update");
			getEmp($(this).attr("eidt-id"));
			$("#emp_update_btn").attr("eidt-id",$(this).attr("eidt-id"));
			$('#emps_update_modal').modal({
				backdrop: 'static',	
			});
		});
		
		function getEmp(id){
			$.ajax({
				url:"${APP_PATH}/qemp/"+id,
				type:"GET",
				success:function(result){
					var empDate=result.extend.emp;
					$("#emp-name-update").text(empDate.empName);
					$("#emp-email-update").val(empDate.email);
					$("#emp-sex-update").val(empDate.gender);
					$("#emp-dept-update").val(empDate.dId);
				}
			});
		}
		
		$("#emp_update_btn").click(function(){
			if(!validate_email_from()){
				return false;
			}
			$.ajax({
				url:"${APP_PATH}/empupdate/"+$(this).attr("eidt-id"),
				type:"POST",
				data:$("#emps_update_modal form").serialize()+"&_method=PUT",
				success:function(result){
					$("#emps_update_modal").modal('hide');
					to_page(tonum);
				}
			});
		});
		 
		$(document).on("click",".delete_btn",function(){
			var empName=$(this).parents("tr").find("td:eq(2)").text();
			var empId=$(this).attr("del-id");
			if(confirm("确认要删除["+empName+"]吗？")){
				$.ajax({
					url:"${APP_PATH}/empdelete/"+empId,
					type:"DELETE",
					success:function(result){
						to_page(tonum);
					}
				})
			}
		}); 

		
			//全选或全不选
	     $("#check_all").click(function(){   
		    $(".check_items").prop("checked",$(this).prop("checked"));
	   	});
		    
		 $(document).on("click",".check_items",function(){
			var flag = $(".check_items:checked").length==$("check_items").length;
			$("#check_all").prop("checked",flag);
		});     
		
		$("#empDelete").click(function(){
			var empNames="";
			var del_idstr="";
			$.each($(".check_items:checked"),function(){
				empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
				del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
			});
			empNames = empNames.substring(0,empNames.length-1);
			del_idstr = del_idstr.substring(0,del_idstr.length-1);
			if(confirm("确认删除["+empNames+"]这些数据吗？")){
				$.ajax({
					url:"${APP_PATH}/empdelete/"+del_idstr,
					type:"DELETE",
					success:function(result){
						to_page(tonum);
					}
				});
			}
		}); 
		  
		
			
			
	</script>
</body>
</html>			